<!-- src/views/AnalyticsDashboard.vue -->
<template>
  <div class="analytics-dashboard">
    <div class="dashboard-header">
      <h2>📊 智能数据分析</h2>
      <div class="time-filter">
        <el-date-picker v-model="timeRange" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"
          @change="handleTimeChange" />
      </div>
    </div>

    <el-row :gutter="20">
      <!-- 实时数据 -->
      <el-col :span="24">
        <el-card class="realtime-stats">
          <template #header>
            <div class="card-header">
              <span>📈 实时数据概览</span>
              <el-tag type="success">{{ currentTime }}</el-tag>
            </div>
          </template>
          <el-row :gutter="20">
            <el-col :span="6" v-for="stat in realtimeStats" :key="stat.key">
              <StatCard :icon="stat.icon" :label="stat.label" :value="stat.value" :trend="stat.trend"
                :type="stat.type" />
            </el-col>
          </el-row>
        </el-card>
      </el-col>

      <!-- 趋势预测图表 -->
      <el-col :span="24">
        <el-card class="trend-prediction">
          <template #header>
            <div class="card-header">
              <span>📊 趋势预测分析</span>
              <el-radio-group v-model="trendType">
                <el-radio-button label="users">用户增长</el-radio-button>
                <el-radio-button label="activities">活跃度</el-radio-button>
                <el-radio-button label="revenue">收入预测</el-radio-button>
              </el-radio-group>
            </div>
          </template>
          <TrendChart :chart-data="trendData[trendType]" :chart-type="trendType"
            v-if="trendData[trendType]?.data.length > 0" />
        </el-card>
      </el-col>

      <!-- AI洞察报告 -->
      <el-col :span="12">
        <el-card class="ai-insights">
          <template #header>
            <div class="card-header">
              <span>🤖 AI智能洞察</span>
              <el-button size="small" @click="refreshInsights" :loading="insightsLoading">
                <el-icon>
                  <Refresh />
                </el-icon>
                刷新分析
              </el-button>
            </div>
          </template>
          <div class="insights-list">
            <div v-for="insight in aiInsights" :key="insight.id" class="insight-item">
              <div class="insight-icon" :class="`insight-${insight.type}`">{{ insight.icon }}</div>
              <div class="insight-content">
                <div class="insight-title">{{ insight.title }}</div>
                <div class="insight-desc">{{ insight.description }}</div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 异常检测 -->
      <el-col :span="12">
        <el-card class="anomaly-detection">
          <template #header>
            <div class="card-header">
              <span>⚠️ 异常检测</span>
              <el-badge :value="anomalies.length" class="anomaly-badge" v-if="anomalies.length > 0">
                <el-button size="small">查看详情</el-button>
              </el-badge>
            </div>
          </template>
          <div class="anomaly-list">
            <el-empty v-if="anomalies.length === 0" description="暂无异常" />
            <div v-for="anomaly in anomalies.slice(0, 5)" :key="anomaly.id" class="anomaly-item">
              <div class="anomaly-content">
                <div class="anomaly-title">{{ anomaly.title }}</div>
                <div class="anomaly-time">{{ anomaly.time }}</div>
              </div>
              <el-button size="small" type="primary" plain>处理</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { Refresh } from '@element-plus/icons-vue';
import { useAnalyticsData } from '../composables/useAnalyticsData';
import StatCard from '../components/StatCard.vue';
import TrendChart from '../components/TrendChart.vue';

const {
  timeRange,
  currentTime,
  insightsLoading,
  trendType,
  realtimeStats,
  aiInsights,
  trendData,
  anomalies,
  handleTimeChange,
  refreshInsights,
} = useAnalyticsData();
</script>

<style scoped>
.analytics-dashboard {
  padding: 20px;
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.time-filter {
  display: flex;
  gap: 10px;
}

.el-row {
  margin-bottom: 20px;
}

.el-card {
  height: 100%;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.insights-list,
.anomaly-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.insight-item,
.anomaly-item {
  display: flex;
  align-items: center;
  gap: 15px;
}

.insight-icon {
  font-size: 1.5em;
}

.anomaly-content {
  flex-grow: 1;
}

.anomaly-title {
  font-weight: bold;
}

.anomaly-time {
  font-size: 0.8em;
  color: #999;
}
</style>